<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: relative;
      
            height: 100vh;
            /*  background: url(./雷霆战机背景.jpeg); */

        }

       

        .wei {
            content: "";
            position: absolute;
            bottom: 0;
            left: calc(50% + 37px);
            top: calc(100% -10px);
            width: 10px;
            height: 80px;
            background-image: linear-gradient(blue, transparent);
            filter: blur(4px) brightness(50);
        }

        .box>img {
            position: relative;
            position: absolute;
            z-index: 100;
            width: 150px;
            height: 150px;
            /*  calc 计算 */
            left: calc(50% - 30px);
            top: calc(100% - 150px);
        }

        .zidan {
            position: absolute;
            top: calc(100% - 62px);
            left: calc(50% - 25px);
            width: 20px;
            height: 60px;
            border-top: 1px solid rgb(213, 237, 33);
            background-image: linear-gradient(rgb(235, 47, 14),rgb(134, 52, 210),rgb(219, 36, 152), rgba(218, 206, 28, 0), rgba(207, 25, 25, 0),transparent);
            border-top-left-radius: 100%;
            border-top-right-radius: 100%;
            transition: top 0s linear;
        }
    </style>
</head>

<boday>
    <div class="box">
   
        <!--   <span class="zidan"></span> -->
        <img src="./飞机(1).png" alt=""> 
            <h3 class="wei"></h3>
    </div>

    <script>
        var img = document.querySelector(".box > img");
        var box = document.querySelector(".box");
var wei = document.querySelector(".wei");
        document.addEventListener("mousemove", function (e) {
            img.style.left = e.clientX - 70 + "px";
            img.style.top = e.clientY - 90 + "px";
          wei.style.left = e.clientX - 2 + "px";
          wei.style.top = e.clientY + 3 + "px";
        }
            
            )

        /* window.onkeydown = function (e) {

            if (e.keyCode < 37 || e.keyCode > 40) return;

            var l = img.getBoundingClientRect().x;
            var y = img.getBoundingClientRect().y;



            if (e.keyCode == 37) {


                l -= 5;
                if (l < 0) l = 0;
            } else if (e.keyCode == 38) {

                y -= 5;
                if (y < 0) l = 0;
            } else if (e.keyCode == 39) {
                var maxl = window.innerWidth - img.offsetwidth;
                l += 5;
                if (l > maxl) l = maxl;
            } else if (e.keyCode == 40) {
                var maxy = window.innerHeight - img.offsetHeight;
                y += 5;
                if (y > maxy) l = maxy;
            }
            img.style.left = l + "px";
            img.style.top = y + "px";
        }
 */




        window.addEventListener("keydown", function (e) {

            if (e.keyCode == 32) {
                var wei = document.createElement("wei");
                wei.classList.add("wei");
                var { x, y } = img.getBoundingClientRect();
                x += 67;
                y += 80;
                wei.style.top = y + "px";
                wei.style.left = x + "px";
                box.appendChild(wei);
                setTimeout(function () {
                    box.removeChild(wei);
                }, 66)
            }


            // 当按下空格
            if (e.keyCode == 32) {


                // 当按下空格
                var span = document.createElement("span");
                // 给这个span添加上这个class 会带有相关样式 
                span.classList.add("zidan");
                // 获取小飞机的位置
                var { x, y } = img.getBoundingClientRect();
                // 计算让x的值等于小飞机中间 x - 小飞机宽的一半 + span宽的一半 
                x += 62;
                y += 20;
                // 设置span的初位置
                span.style.top = y + "px";
                span.style.left = x + "px";
                // 将标签添加至页面
                box.appendChild(span);


                // 在标签添加完成后 执行
                setTimeout(function () {
                    // 标签创建后设置span的过渡时间
                    span.style.transitionDuration = "0.8s";
                    // 设置span位置移动 带有动画效果
                    span.style.top = "-40px";
                    // 等过渡动画执行完毕后删除这个标签 
                    setTimeout(function () {
                        box.removeChild(span);
                    }, 1000)
                }, 0)
            }

        })
    </script>
</body>

</html>